import React, {Component} from 'react';
import {Form, Cascader, Input} from 'antd';
const FormItem = Form.Item;
import options from 'constant/cascader-address-options';

/**
 * 收货地址选择
 */
export default class Receipt extends Component {
    render() {
        const formItemLayout = {
            labelCol: {span: 6},
            wrapperCol: {span: 16},
        };

        const {form:{getFieldDecorator}} = this.props;

        //省市区选择
        const cascaderField = getFieldDecorator('cascader', {
            rules: [
                {
                    required: true, message: '请补充地址信息'
                }
            ]

        })(<Cascader options={options} placeholder="请选择地区信息"/>);

        //详细地址
        const detailAddressField = getFieldDecorator('detailAddress', {
            validateTrigger: 'onBlur',
            rules: [
                {
                    required: true, message: '1-30个字'
                }
            ]
        })(<Input className="w300" maxLength="30"/>);

        //邮政编码
        const mailCodeField = getFieldDecorator('mailCode', {
            validateTrigger: 'onBlur',
            rules: [
                {
                    pattern: /^[1-9]\d{5}$/, message: '6位数字'
                }
            ]
        })(<Input className="w300"/>);

        //收货人姓名
        const consigneeNameField = getFieldDecorator('consigneeName', {
            validateTrigger: 'onBlur',
            rules: [
                {
                    required: true, message: '1-10个字'
                }
            ]
        })(<Input className="w300" maxLength="10"/>);

        //手机号码
        const mobilePhone = getFieldDecorator('mobilePhone', {
            validateTrigger: 'onBlur',
            rules: [
                {
                    required: true, message: '请输入手机号码',
                },
                {
                    pattern: /^1\d{10}$/, message: '请输入正确格式的'
                }
            ]
        })(<Input className="w300"/>);


        //固定号码
        const fixPhone = getFieldDecorator('fixPhone')(<Input className="w300"/>);

        return (
            <Form className="pusht p20">
                <FormItem {...formItemLayout}
                          label="所在地区"
                          required><div className="inline-blk w300">{cascaderField}</div></FormItem>
                <FormItem {...formItemLayout}
                          label="详细地址"
                          required>{detailAddressField}</FormItem>
                <FormItem {...formItemLayout}
                          label="收货人"
                          required>{consigneeNameField}</FormItem>
                <FormItem {...formItemLayout}
                          label="手机号码"
                          required>{mobilePhone}</FormItem>
                <FormItem {...formItemLayout}
                          label="固定号码">{fixPhone}</FormItem>
                <FormItem {...formItemLayout}
                          label="邮政编码">{mailCodeField}</FormItem>
            </Form>
        )
    }
}